<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside :width="isCollapse ? '64px' : '210px'">
      <el-menu
        router
        @select="handleSelect"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :unique-opened="true"
        text-color="#bfcbd9"
        active-text-color="#409eff"
        background-color="#304156"
        default-active="2"
        class="el-menu-vertical-demo"
      >
        <!--
          <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>homepage</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template> -->
        <!-- <el-menu-item index="1-1">选项1</el-menu-item> -->
        <!-- <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
        </el-submenu> -->
        <el-menu-item index="/home/welcome">
          <i class="el-icon-menu"></i>
          <span slot="title">homepage</span>
        </el-menu-item>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-user-solid" />
            <span>用户管理</span>
          </template>
          <el-menu-item index="/home/users">用户列表</el-menu-item>
          <!-- <el-menu-item @click="jump">用户列表</el-menu-item> -->
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-operation" />
            <span>权限管理</span>
          </template>

          <el-menu-item-group>
            <el-menu-item index="/home/authority">角色权限</el-menu-item>
            <!-- <el-menu-item index="/home/powers">角色权限</el-menu-item> -->
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-s-shop" />
            <span>商品分类管理</span>
          </template>
          <el-menu-item index="/home/goods">商品分类</el-menu-item>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-s-goods" />
            <span>商品列表</span>
          </template>
          <el-menu-item index="/home/goodslist">商品列表</el-menu-item>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-s-order" />
            <span>订单管理</span>
          </template>
          <el-menu-item index="/home/order">订单列表</el-menu-item>
        </el-submenu>

        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-success" />
            <span>数据统计</span>
          </template>
          <el-menu-item index="/home/sort">统计报表</el-menu-item>
          <el-menu-item v-if="true" index="/home/moneysort"
            >财务报表</el-menu-item
          >
        </el-submenu>

        <el-menu-item index="/home/aboutme">
          <i class="el-icon-info" />
          <span slot="title">about me</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右边 -->
    <el-container>
      <el-header height="50px">
        <el-col :span="6"
          ><a class="showtag" @click="isCollapse = !isCollapse">
            <img src="../../assets/show.svg" class="svg1" /> </a
        ></el-col>
        <el-col :span="20"
          >用户名：<strong>{{ userinfo.name }}</strong>
        </el-col>
        <el-col :span="1">
          <!-- 全屏 -->
          <div @click="full">
            <a class="showtag">
              <img src="../../assets/fullscreen.svg" class="svg1" />
            </a>
          </div>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="logOut" size="small" class="logout"
            >logOut</el-button
          >
        </el-col>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      userinfo: { name: "", role: "" },
      isCollapse: false,
      fulltag: true,
    };
  },
  methods: {
    // 退出账号
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    logOut() {
      this.$store.dispatch("user/ReSet");
      console.log(this.$store.getters.getUserInfoRoleid);
      sessionStorage.clear();
      this.$router.push("/");
    },
    full() {
      if (this.fulltag) {
        var ele = document.documentElement;
        if (ele.requestFullscreen) {
          ele.requestFullscreen();
        } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
        } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
        } else if (ele.webkitRequestFullscreen) {
          ele.webkitRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
        this.fulltag = false;
      }
    },
    jump() {
      this.$router.push("/home/powers");
    },
  },
  created() {
    // this.$set(this.userinfo.name, this.$store.getters.getUserInfoRoleid);
    this.userinfo.name = this.$store.getters.getUserInfoName;
    this.userinfo.role = this.$store.getters.getUserInfoRoleid;
    // console.log(this.$store.getters.getUserInfoRoleid);
    // console.log(1, this.userinfo);
  },
};
</script>

<style lang="scss" scoped>
.el-aside {
  transition: width 0.8s;
  background-color: rgb(48, 65, 86);
  height: 100%;
  .el-menu {
    border-right: 0;
  }
}
.el-header {
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-main {
  background-color: rgb(237, 239, 242);
  // padding: 15px  !important;
}
.el-container {
  height: 100%;
}
.el-container {
  position: relative;
}
.logout {
  display: flex;
}
.showtag {
  height: 100%;
  width: 50px;
  position: relative;
  // text-align: center;
  transform: translateX(-38%);

  .svg1 {
    height: 15px;
    width: 15px;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
  }
  .svg1:hover {
    color: #3191ff;
  }
}
.showtag:hover {
  background-color: #f9f9f9;
}
// 处理折叠卡
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  height: 100%;
}
//选中的颜色
// .is-active {
//   background-color: #001528  !important;
// }

.el-main {
  padding: 0 !important;
}
</style>
